/*
 * @Author: wurangkun
 * @Date: 2024-07-23 21:01:01
 * @LastEditTime: 2024-08-30 23:39:40
 * @LastEditors: wurangkun
 * @FilePath: \my-app\components\page\index.tsx
 * @Description: 
 */
import { View, Text, TouchableOpacity } from 'react-native'
import React, { useEffect, useState } from 'react'
import { router, Stack, useRootNavigationState } from 'expo-router'
import { StatusBar } from 'expo-status-bar';
import { StackAnimationTypes } from 'react-native-screens'
import { toIndex } from '@/hooks/routerHooks';

interface Props {
  children: React.ReactNode
  headShow?: boolean
  title?: string
  backgroundColor?: string
  showLeft?: boolean
  animationDuration?: number
  animation?: StackAnimationTypes
}

export default function Page({ ...props }: Props) {
  const { title, backgroundColor = "#f6f7f9", headShow = true, showLeft = true, animation = "default", animationDuration = 350 } = props
  const root = useRootNavigationState()
  const [level, setLevel] = useState(1)
  useEffect(() => {
    console.log('Page', `title:${title}`)
    setLevel(root.routes.length)
    return () => {
      console.log('Page unmount')
    }
  }, [])
  return (
    <View style={{ flex: 1, backgroundColor }}>
      <Stack.Screen options={{
        headerShown: headShow,
        title: title,
        headerLeft: () => showLeft ? navLeftNode({ showHome: level > 2 }) : <></>,
        headerRight: () => <></>,
        animationDuration,
        animation
      }} />
      <StatusBar style='dark' />
      <View style={{ flex: 1, backgroundColor: "#fff" }}>
        {props.children}
      </View>
    </View >
  )
}


interface NavLeftProps {
  showHome: boolean,
}

function navLeftNode({ ...props }: NavLeftProps) {
  return (<View style={{ flexDirection: 'row' }}>
    <TouchableOpacity onPress={() => router.back()}><Text>back</Text></TouchableOpacity>
    {props.showHome ? <TouchableOpacity style={{ marginLeft: 10 }} onPress={() => toIndex()}><Text>home</Text></TouchableOpacity> : <></>}
  </View>);
}
